<template>
    <div class="zg_videobox">
        <div class="zg_video">
            <div class="zg_video_bt">
            <span>
            <router-link :to="{path:'/class-'+courseId}">&lt; 返回课程主页</router-link>
            </span>
                {{currentLesson.title}}
            </div>
            <div class="zg_video_cont offcn_size">
                <div class="zg_shipin">
                    <div class="zg_shipin_cont" id="KeFuDiv">
                        <div class="zg19_lb_jzts" style="display:none">加载失败，请刷新重试</div>
                        <p class="xlzh" style="display:none;">线路切换中...</p>
                        <div style="width: 100%; height: 100%; " id="KeFuDivcontent">

                            <!--                            播放器-->
                            <div style="width: 100%;height:100%" v-show="lessonData.isBuy">
                                <video id="myvideoplayer"  class="video-js vjs-default-skin"
                                       controls
                                       autoplay="muted"
                                       preload="auto"
                                       style="width: 100%;height:100%"
                                >

                                </video>
                            </div>


                            <img src="../../public/images/offcn_shuaxinbg.jpg" class="playimg" v-if="!lessonData.isBuy">
                            <div class="playZD_kcqx" v-if="!lessonData.isBuy">
                                <dl>
                                    <dt>收费课程</dt>
                                    <dd>购买课程后可学习全部内容</dd>
                                    <dd><em class="kcxx">课程信息</em></dd>
                                    <dd>课件价格：{{(lessonData.coursePrice/100).toFixed(2)}}元</dd>
                                    <dd>课时：{{lessonData.courseHour}}</dd>
                                    <dd>在线人数：{{lessonData.saleCount}}人</dd>
                                    <dd>
                                        <a  id="J_submit_orders_zero" @click="buyCourse"  class="playZD_zbs">加入学习</a>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="kcbf_jiao" id="kcbf_jiao"></div>
                    <div class="zg_mulu" style="height: 598px;">
                        <div class="zg_mulu_bt"><span class="on"><i>目录</i></span></div>
                        <div class="tablecont osX">
                            <div id="pane1" class="scroll-pane mCustomScrollbar _mCS_1" style="position:relative;"><div id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside" tabindex="0"><div id="mCSB_1_container" class="mCSB_container" style="position:relative; top:0; left:0;" dir="ltr">
                                <ul class="mulunr">

                                    <li v-for="(lesson,index) in lessonList" :class="{'on':lesson.id==lessonId}">
                                        <em>{{index+1}}</em>
                                        <span   class="ioc01">
                                    <a class="spec1"  :href="getLessonRoute(lesson.id)" :title="lesson.title">
                                    【视频】{{index+1}}－{{lesson.title}}
                                    </a> [{{lesson.totalTime}}]
                                    </span>
                                    </li>


                                </ul>
                            </div><div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_vertical" style="display: block;"><div class="mCSB_draggerContainer"><div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; display: block; height: 412px; max-height: 429px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="zg_video_bot">
                <div class="xlzz"><a class="da" href="javascript:void(0)"><em class="ioc01">&nbsp;</em>线路</a>
                    <p class="xlz"><a href="javascript:void(0);" onclick="onLinePlay(0);" class="hover"><em>√</em>线路1</a><a href="javascript:void(0);" onclick="onLinePlay(1);"><em>√</em>线路2</a><a href="javascript:void(0);" onclick="onLinePlay(2);"><em>√</em>线路3</a></p></div>
                <ul>
                    <li><a href="javascript:void(0);" id="house" style="color:#999;" data-id=""><em class="ioc02">&nbsp;</em>收藏</a></li>
                    <li><a href="javascript:void(0)"><em class="ioc04">&nbsp;</em>手机看</a>
                        <p class="app">
                            <span class="jiao">&nbsp;</span>
                            <font><strong><em>方式1</em>：用手机看</strong><img src="public/cimages/wx_it.png" width="106" height="106"></font>
                        </p>
                    </li>
                    <li><a href="/help/questionnaire/cid/76357/lid/1472577/" target="_blank"><em class="ioc06">&nbsp;</em>问题反馈</a></li>
                </ul>
                <div class="zg_video_msqh on" onclick="daymsqh(this);">白天模式</div>
                <div class="xlzz xlzz_new" @mouseover="speedShow" @mouseleave="speedHide">
                    <a class="da" id="vspeed" href="javascript:void(0)">
                        <em class="ioc02">&nbsp;</em>{{speedVal}}</a>
                    <p class="xlz" :style="speedStyle" >
                        <a  :class="speedSelectClass(1)" @click="onchangespeed(1)"><em>√</em>×1倍</a>
                        <a  :class="speedSelectClass(1.2)" @click="onchangespeed(1.2)"><em>√</em>×1.2倍</a>
                        <a  :class="speedSelectClass(1.35)" @click="onchangespeed(1.35)"><em>√</em>×1.35倍</a>
                        <a  :class="speedSelectClass(1.5)" @click="onchangespeed(1.5)"><em>√</em>×1.5倍</a>
                        <a  :class="speedSelectClass(1.6)" @click="onchangespeed(1.6)"><em>√</em>×1.6倍</a>
                        <a  :class="speedSelectClass(1.8)" @click="onchangespeed(1.8)"><em>√</em>×1.8倍</a>
                        <a  :class="speedSelectClass(2.0)" @click="onchangespeed(2.0)"><em>√</em>×2.0倍</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
    // video.js 安装
    // npm install video.js --save
    // npm install videojs-contrib-hls --save

    import videojs from 'video.js'
    import 'videojs-contrib-hls'


    import {getLessonPlanAPI,buyCourseAPI} from "../network/course";


    export default {

        name:'VideoPlay',
        data:function () {
            return {
                courseId:0,
                lessonId:0,
                lessonData:{},
                lessonList:[],
                currentLesson:{},
                myPlayer:{},
                speedStyle:''

            }
        },
        created() {
            this.$emit('showCate',false)

            this.lessonId = this.$route.params.id

            this.courseId = this.$route.query.courseId

            console.log(this.lessonId)
            console.log(this.courseId)

            this.$store.dispatch('refreshUserInfo')

            this.$nextTick(()=>{

                this.initPlayer()
                //请求数据
                this.getLessonList()

            })



        },methods:{
            initPlayer(){
                this.myPlayer = videojs('myvideoplayer',{
                    bigPlayButton:false,
                    textTrackDisplay:false,
                    posterImage:false,
                    errorDisplay:false,
                    hls:{
                        withCredentials:true
                    }
                })

            },
            getLessonList:function () {
                getLessonPlanAPI(this.courseId)
                    .then(res=>{
                        console.log(res);
                        this.lessonData=res
                        this.lessonList=res.lessons
                        this.currentLesson=this.getCurrentLesson()

                    })

            },
            getCurrentLesson:function () {
                let tempLesson = {title:'',videoUrl:''}
                if(this.lessonList){
                    for(let i=0;i<this.lessonList.length;i++){
                        let lid = this.lessonList[i].id
                        if(this.lessonId == lid){
                            tempLesson = this.lessonList[i]
                            if(this.lessonData.isBuy &&  tempLesson.videoUrl){
                                this.myPlayer.src(
                                    {
                                        src:tempLesson.videoUrl,
                                        type:'application/x-mpegURL',
                                        withCredentials:true
                                    }
                                )
                            }
                        }
                    }
                }
                return tempLesson
            },
            buyCourse:function () {

                //是否登录
                if(!this.$store.getters.getUserLogin){
                    this.$router.push('/foreuser/login')
                }else {
                    //调用购买API
                    buyCourseAPI(this.courseId)
                        .then(res=>{
                            this.lessonData.isBuy=true
                        })
                }

            },
            getLessonRoute:function (id) {
                return "/video-"+id+"?courseId="+this.courseId
            },
            onchangespeed:function (val) {
                this.speedVal=val
                this.myPlayer.playbackRate(val)
            },
            speedShow:function () {
                this.speedStyle='display:block'
            },
            speedHide:function () {
                this.speedStyle=''
            },
            speedSelectClass:function (val) {
                return val ===this.speedVal ?"hover on":''
            }

        }

    }

</script>
<style>
    @import "../../public/video/css/style.css";
    @import "../../public/video/css/style1200.css";
    @import "../../public/19ke/css/index.css";
    .offcn_newbtn {
        display: inline-block;
        *display: inline;
        zoom: 1;
        width: 86px;
        height: 24px;
        border: 1px solid #FF740F;
        margin-right: 10px;
        font-size: 12px;
        line-height: 24px;
        color: #ff740f;
        border-radius: 3px;
        text-align: center;
        margin-top: 12px;
    }

    .offcn_newbtn:hover {
        background: #ff740f;
        color: #fff;
        text-decoration: none;
    }
</style>